<template>
  <div class='container app-container'>
    <el-card class="box-card">
      <!--      上方表单-->
      <questions-screen @search="onSearch"/>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="0"/>
        <el-tab-pane label="待审核" name="1"/>
        <el-tab-pane label="已审核" name="2"/>
        <el-tab-pane label="已拒绝" name="3"/>
      </el-tabs>
      <title-alert :counts="counts"/>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="试题编号" prop="number" width="120">
        </el-table-column>
        <el-table-column label="学科" prop="subject" width="180">
        </el-table-column>
        <el-table-column label="目录" prop="catalog" width="180">
        </el-table-column>
        <el-table-column label="题型" width="120">
          <template v-slot="{row}">{{ questionType(row.questionType - 0) }}</template>
        </el-table-column>
        <el-table-column label="题干" width="280">
          <template v-slot="{row}">
            <div v-html="row.question"></div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="180">
          <template v-slot="{row}">
            {{ new Date(row.addDate) |parseTime }}
          </template>
        </el-table-column>
        <el-table-column label="难度" prop="address" width="80">
          <template v-slot="{row}">{{ difficulty(row.difficulty - 0) }}</template>
        </el-table-column>
        <el-table-column label="录入人" prop="creator" width="180">
        </el-table-column>
        <el-table-column label="审核状态" width="120">
          <template v-slot="{row}">
            {{ AuditType(row.chkState) }}
          </template>
        </el-table-column>
        <el-table-column label="审核意见" prop="chkRemarks" width="180">
        </el-table-column>
        <el-table-column label="审核人" prop="chkUser" width="120">
        </el-table-column>
        <el-table-column label="发布状态" width="120">
          <template v-slot="{row}">
            {{ publishState(row.publishState, row.chkState) }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" prop="address" width="200">
          <template v-slot="{row}">
            <el-button size="small" type="text" @click="topicPreview(row.id)">预览</el-button>
            <el-button :disabled="row.chkState!==0" size="small" type="text" @click="auditClick(row.id)">审核</el-button>
            <el-button :disabled="!!row.publishState" size="small" type="text"
                       @click="$router.push('/questions/new?id='+row.id)">修改
            </el-button>
            <el-button size="small" type="text" @click="publishClick(row.publishState,row.id)">
              {{ !row.publishState ? '上架' : '下架' }}
            </el-button>
            <el-button :disabled="!!row.publishState" size="small" type="text" @click="onDel(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--      分页-->
      <el-row align="middle" justify="end" style="height: 60px" type="flex">
        <page-tool
          :paginationPage="pageData.page"
          :paginationPagesize="pageData.pagesize"
          :total="counts"
          @pageChange="handleCurrentChange"
          @pageSizeChange="handleSizeChange"/>
      </el-row>
    </el-card>
    <questions-preview v-if="dialog" v-model="dialog" :topicInfo="topicInfo" @destroy="topicInfo={}"/>
    <!--    审核弹框-->
    <questions-check :audit-form="auditForm" :dialog-visible="dialogVisible" @onClose="auditClose" @onSave="auditSave"/>
  </div>
</template>

<script>
import QuestionsScreen from '@/module-hmmm/components/questions-screen'
import TitleAlert from '@/module-hmmm/components/title-alert'
import {
  choice as questionChoice,
  choiceCheck,
  choicePublish,
  detail as questionDetail,
  remove
} from '@/api/hmmm/questions'
import PageTool from '@/module-dashboard/components/pageTool'
import QuestionsPreview from '@/module-hmmm/components/questions-preview'
import QuestionsCheck from '@/module-hmmm/components/questions-check'

export default {
  name: 'questions-choice',
  components: { QuestionsCheck, QuestionsPreview, PageTool, TitleAlert, QuestionsScreen },
  data () {
    return {
      activeName: 0,
      pageData: {
        page: 1, // 当前页数
        pagesize: 5 // 每页几条
      },
      counts: '',
      tableData: [],
      dialog: false,
      topicInfo: {}, // 题目信息
      dialogVisible: false,
      auditForm: {
        chkRemarks: '',
        chkState: 1,
        id: null
      }
    }
  },
  created () {
    this.loadChoiceList()
  },
  methods: {
    // tab 栏发生变化时
    async handleClick (val) {
      this.pageData.page = 1
      this.pageData.pagesize = 5
      this.pageData.chkState = val.name - 1
      if (this.pageData.chkState < 0) this.pageData.chkState = null
      await this.loadChoiceList(this.form)
    },
    async loadChoiceList (form) {
      const { data } = await questionChoice({ ...this.pageData, ...form })
      this.tableData = data.items
      this.counts = data.counts
    },
    // 每页几条数据该表
    async handleSizeChange (val) {
      this.pageData.pagesize = val
      await this.loadChoiceList(this.form)
    },
    // 当前页码改变
    async handleCurrentChange (val) {
      this.pageData.page = val
      await this.loadChoiceList(this.form)
    },
    questionType (val) {
      if (val === 1) {
        return '单选'
      } else if (val === 2) {
        return '多选'
      } else {
        return '简答'
      }
    },
    AuditType (val) {
      if (val === 1) {
        return '已审核'
      } else if (val === 2) {
        return '已拒绝'
      } else {
        return '待审核'
      }
    },
    // 发布状态
    publishState (pubState, chkState) {
      if (chkState === 1) {
        return pubState ? '已发布' : '已下架'
      }
      return '待发布'
    },
    difficulty (val) {
      if (val === 1) {
        return '简单'
      } else if (val === 2) {
        return '一般'
      } else {
        return '困难'
      }
    },
    async topicPreview (id) {
      this.dialog = true
      const res = await questionDetail({ id })
      res.data.options.sort((a, b) => {
        return (a.code.charCodeAt() + '') > (b.code.charCodeAt() + '') ? 1 : -1
      })
      this.topicInfo = res.data
    },
    auditClick (id) {
      this.dialogVisible = true
      this.auditForm.id = id
    },
    auditClose () {
      this.dialogVisible = false
      this.auditForm = {
        chkRemarks: '',
        chkState: 1
      }
    },
    async auditSave () {
      if (this.auditForm.chkRemarks === '') {
        return this.$message.warning('请输入审核意见')
      }
      await choiceCheck(this.auditForm)
      this.$message.success('操作成功')
      await this.loadChoiceList(this.form)
      this.auditClose()
    },
    publishClick (val, id) {
      const str = !val ? '上架' : '下架'
      this.$confirm('您确认' + str + '这道题目吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await choicePublish({ publishState: val ? 0 : 1, id: id })
        await this.loadChoiceList()
        this.$message.success(str + '成功')
      }).catch()
    },
    onDel (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(id)
        await this.loadChoiceList(this.form)
        if (!this.tableData.length) {
          this.pageData.page--
          await this.loadChoiceList(this.form)
        }
        this.$message.success('删除成功')
      }).catch()
    },
    onSearch (form) {
      this.pageData.page = 1
      this.pageData.pagesize = 5
      this.form = form
      this.loadChoiceList(form)
    }
  }
}
</script>

<style lang='less' scoped></style>
